<template>
    <!-- <div class="container">                                                               容器 -->
        <!-- <div v-swiper:mySwiper="swiperOption">                                              swiper选择项 -->
            <!-- <div class="swiper-wrapper">                                                    swiper 容器 -->
                <!-- <div class="swiper-slide" v-for="(item,index) in banners" :key="index">     容器里 loop 每一项 -->
                    <!-- <img :src="item.img">                                                   每一项里的图片 -->
                <!-- </div> -->
            <!-- </div> -->
            <!-- <div class="swiper-pagination"></div>                                           定位小圆点 -->
        <!-- </div> -->
    <!-- </div> -->

    <!-- <van-swipe @change="onChange">
            <van-swipe-item class="swiper-slide" v-for="(item,index) in banners" :key="index">
                <img :src="item.img"/>
            </van-swipe-item>
            
            <template #indicator>
                <div class="custom-indicator">
                {{ current + 1 }}&nbsp;<span>/&nbsp;2</span>
                </div>
            </template>
        </van-swipe> -->

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in banners" :key="index">
                <img :src="item.img"/>
            </van-swipe-item>
        </van-swipe>
</template>
<script>
export default {
    name: 'swiper',
  
    data() {
        return {
           banners: [ 
                {
                    id:0,
                    img:'https://t16img.yangkeduo.com/pdd_oms/2019-06-30/67eb445788fa7bee29ffcab9531c1af2.jpg?imageMogr2/strip%7CimageView2/2/w/750/q/80'
                },{
                    id:1,
                    img:'https://t16img.yangkeduo.com/pdd_oms/2019-06-30/37331eece3774031bb1fd79bb76ce466.jpg?imageMogr2/strip%7CimageView2/2/w/750/q/80'
                },{
                    id:2,
                    img:'https://t00img.yangkeduo.com/goods/2019-11-20/0c7cbcf6a07241f8ac9feea5002a498e.jpeg?imageMogr2/strip%7CimageView2/2/w/750/q/80'
                },{
                    id:3,
                    img:'https://t00img.yangkeduo.com/goods/2020-02-26/84e0bae0b6461594409c6eb80e447a44.jpeg?imageMogr2/strip%7CimageView2/2/w/750/q/80'
                }
           ],
            swiperOption: {
                // 参数选项,显示小点
                pagination: {
                    el: '.swiper-pagination'
                },
                //循环
                loop:true,
                //每张播放时长3秒，自动播放
                autoplay:true,
                //滑动速度
                speed:500,
                // delay:1000
         
            }
        } 
    },
    mounted() { 

    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
        ///----- 1

        .container{
            width:100vw;
            height:21vh;
            background:#ccc;
            .swiper-wrapper{
                .swiper-slide{
                    img{
                        width:100%;
                    }
                }
            }
        }
        ///----- 2

        .swiper-slide{
            width:100vw;
            height:auto;
            img{
                width:100vw;
            }
        }
        .custom-indicator {
            position: absolute;
            right: 0vw;
            bottom: 3vh;
            padding: 2px 5px;
            font-size: 0.8rem;
            background: rgba(0, 0, 0, 0.3);
            color:#fff;
            width:12vw;
            border-radius:1rem 0 0 1rem;
            text-align:center;
            span{
                font-size:0.5rem;
                width:1rem
            }
        }
        ///----- 3
         .my-swipe .van-swipe-item {
            img{
                width:100vw;
            }
         }

</style>
